<template>
  <div class="swiper-container" ref="movie">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in list" :key="index">
              <img :src="item.images.medium" alt="">
              <div class="text">{{item.title}}</div>
              <m-star :num="item.rating.average"></m-star>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</template>
<script>
  import { bus } from '../../../bus.js'
  import '../../../lib/swiper/js/swiper.js'
  import mStar from '../../../components/star'
  export default {
    name: 'MovieSwiper',
     props:{
      list:{
        type:Array,
        default:[]
      },
      
    },
    data() {
      return {

      }
    },
    components: {
     mStar
    },
    created () {
      bus.$on('initSwiper',()=>{
        this.$nextTick(()=>{
          this.initSwier();
        })
      })
      
    },
    mounted () {
      
    },
    methods: {
      initSwier(){
         var swiper = new Swiper(this.$refs.movie, {
           freeMode:true,
            slidesPerView: 'auto',
            paginationClickable: true,
            spaceBetween: 15
        });
      }
    }
  }
</script>
<style lang="less" scoped>
    .swiper-container {
        width: 100%;
        height: 200px;
    }
   
    .swiper-slide {
        background: #fff;
        width: 100px;
       
        &:nth-of-type(1){
          margin-left:15px;
        }
        img{
          display: block;
          height: 147px;
        }
        .text{
          display: block;
          width: 100%;
          font-size: 14px;
          font-weight: bold;
          padding-top: 5px;
         
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        }
        .star{
          font-size: 12px;
        }
        /* Center slide text vertically */
      
      
    }

</style>